<template>
    <div>
        <el-table :cell-class-name="handleCellClassName" :data="getTable" style="width: 100%" border
            @selection-change="handleSelectionChange" :row-key="getRowKey" :tree-props="{ children: 'childrens' }">
            <el-table-column type="selection" width="55" v-if="isCheck" />
            <el-table-column align="center" type="index" label="序号" width="50" v-if="isSortNum" />
            <el-table-column v-for="item in columns" :key="item.id" :label="item.label" width="180" align="center"
                show-overflow-tooltip>
                <template #default="{ row, $index }">
                    <slot :scope="row" :index="$index" :name="item.prop">
                        <span class="header-tooltip">
                            {{ row[item.prop] | filterData(item, colOptionEnum[item.dicType]) }}
                        </span>
                    </slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'finalAccountsTable',
    filters: {
        // 列表默认展示数据的处理
        filterData(prop, item, dicList) {
            let propName = ''
            if (!prop && prop !== 0) {
                return ''
            }
            if (prop === '-') {
                return prop
            }
            if (item.dicType && Array.isArray(dicList) && dicList.length) {
                const propObj = dicList.find(sign => sign[item.dicProp.value] === prop) || {}
                propName = JSON.stringify(propObj) !== '{}' ? propObj[item.dicProp.label] : ''
            } else {
                if (item.filter && JSON.stringify(item.filter) !== '{}') {
                    propName = item.filter[String(prop)] || ''
                } else {
                    propName = prop
                }
            }
            return propName || ''
        }
    },
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        },
        // 列表数据枚举字段选项集
        colOptionEnum: {
            type: Object,
            default: () => ({})
        },
        isCheck: {
            type: Boolean,
            default: false
        },
        isSortNum: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
        }
    },
    computed: {
        getTable() {
            const changeData = this.tableData?.map(item => {
                const newItem = { ...item }; // 浅拷贝，避免修改原对象
                if (newItem.children?.length) {
                    newItem.childrens = newItem.children;
                }
                delete newItem.children; // 删除原children属性
                if (!newItem.id) {
                    newItem.id = this.generateRandomId();
                    if (newItem.childrens) {
                        newItem.childrens = newItem.childrens.map(child => ({
                            ...child,
                            id: child.id || this.generateRandomId()
                        }));
                    }
                }
                return newItem;
            });
            return changeData
        },
    },
    methods: {
        handleCellClassName({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 && column.label === '工程项目支出事项') { // 第一个列的索引为0
                return 'your-custom-class';
            }
            return 'add-center';
        },
        generateRandomId(length = 8) {
            const chars = '0123456789'
            let result = ''
            const arr = new Uint8Array(length)
            window.crypto.getRandomValues(arr)
            for (let i = 0; i < length; i++) {
                // 注意：Uint8Array中的值范围是0-255，所以我们需要将其转换为字符集的有效索引
                const idx = arr[i] % chars.length
                result += chars[idx]
            }
            return result
        },
        getRowKey(row) {
            return row.id;
        },
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val)
        }
    }
}

</script>
<style lang="scss" scoped>
.header-tooltip {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep .el-table__row .add-center .el-tooltip {
    margin: auto;
}

::v-deep .el-table__row .your-custom-class .el-tooltip {
    text-align: left;
}
</style>